<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="egg"></div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted } from "vue";
  import * as echarts from "echarts";
  
  onMounted(() => {
    var chartDom = document.getElementById('egg');
var myChart = echarts.init(chartDom);
var option;

option = {
  color: ['#2DC1B2'],
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid:{
    top:"3%",
    right:"2%"
  },
  legend: {
    right: 'center',
    itemWidth: 20,
    itemHeight: 16,
    itemGap: 50,
    gap: 50,
    textStyle: {
      color: '#18191B',
      fontSize: 16
    }
  },
  xAxis: {
    type: 'category',
    data: [5, 10, 15, 20, 25, 30],
    axisLabel: {
      color: '#CFCFCF',
      interval: 0,
      fontSize: 12,
      formatter: '{value}号'
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    // data:["0°C", "5°C", "10°C", "20°C", "30°C", "40°C"],
    axisLabel: {
      show: true,
      color: '#CFCFCF',
      fontSize: 12,
      formatter: '{value}万'
    },

    splitLine: {
      show: true,
      lineStyle: {
        width: 0.8,
        color: 'rgba(127, 214, 255, .4)',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '',
      type: 'bar',
      barWidth: 18,
      data: [20, 30, 25, 35, 20, 35],
      z: 1,
      itemStyle: {
        normal: {
          opacity: 0.8,
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(38, 137, 255, 1)'
              },
              {
                offset: 1,
                color: 'rgba(38, 137, 255, 1)'
              }
            ]
          },
          barBorderRadius: [8, 8, 0, 0]
        }
      },
      label: {
        show: true,
        color: '#fff',
        fontWeight: 600,
        position: 'outside'
      }
    }
  ]
};

option && myChart.setOption(option);
    //监听窗口变化
    window.addEventListener("resize", function () {
      console.log("监听窗口变化");
      myChart.resize();
    });
  });
  </script>
  
  <style scoped>
  #egg {
      width: 100%;
      height: 100%;
  }
  
  
  </style>